<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'

const $route = useRoute()
const $router = useRouter()

const listData1 = ref()
const listData2 = ref()
const listData3 = ref()
const listData4 = ref()

const step = ref(1)
const stepDataVal1 = ref(null)
const stepDataVal2 = ref(null)
const stepDataVal3 = ref(null)
const viewList = async (id, stepVal) => {
  step.value = stepVal
  switch (stepVal * 1) {
    case 2:
      stepDataVal1.value = id
      getStep2()
      break
    case 3:
      stepDataVal2.value = id
      getStep3()
      break
    case 4:
      stepDataVal3.value = id
      getStep4()
      break
  }
}

const changeStep = async (stepVal) => {
  step.value = stepVal
}

const getStep1 = async () => {
  try {
    const res = await api.get('system/data/courseDimension')
    listData1.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const getStep2 = async () => {
  try {
    const res = await api.get(
      'system/data/departmentDimension/' + stepDataVal1.value
    )
    listData2.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const getStep3 = async () => {
  try {
    const res = await api.get(
      'system/data/userDimension/' +
        stepDataVal1.value +
        '/' +
        stepDataVal2.value
    )
    listData3.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const getStep4 = async () => {
  try {
    const res = await api.get(
      'system/data/sectionDimension/' +
        stepDataVal1.value +
        '/' +
        stepDataVal3.value
    )
    listData4.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const handleExport = async () => {
  var requestUrl = ''
  switch (step.value * 1) {
    case 1:
      requestUrl = 'system/data/exportCourse'
      break
    case 2:
      requestUrl = 'system/data/exportDepartment/' + stepDataVal1.value
      break
    case 3:
      requestUrl =
        'system/data/exportUserData/' +
        stepDataVal1.value +
        '/' +
        stepDataVal2.value
      break
    case 4:
      requestUrl =
        'system/data/exportsection/' +
        stepDataVal1.value +
        '/' +
        stepDataVal3.value
      break
  }
  try {
    const res = await api.get(requestUrl)

    openFile(res.data)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const openFile = async (url) => {
  window.open(url)
}

getStep1()
</script>

<template>
  <div class="page">
    <div class="header">
      <a-breadcrumb>
        <template #separator>
          <icon-right />
        </template>
        <a-breadcrumb-item>
          <div @click="changeStep(1)"
               class="can">课程维度</div>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="step >= 2">
          <div @click="changeStep(2)"
               class="can">部门维度</div>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="step >= 3">
          <div @click="changeStep(3)"
               class="can">人员维度</div>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="step >= 4">
          <div>章节维度</div>
        </a-breadcrumb-item>
      </a-breadcrumb>

      <a-button @click="handleExport"
                type="primary">导出</a-button>
    </div>

    <a-table v-if="step == 1"
             :data="listData1">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="课程名称"
                        data-index="name"></a-table-column>
        <a-table-column title="章节数"
                        data-index="count"></a-table-column>
        <a-table-column title="应看部门数"
                        data-index="department_count"></a-table-column>
        <a-table-column title="应看人数"
                        data-index="user_count"></a-table-column>
        <a-table-column title="完成人数"
                        data-index="user_complete_count"></a-table-column>
        <a-table-column title="完成率"
                        data-index="complete_rate"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button @click="viewList(record.id, 2)"
                        type="primary"
                        size="mini">查看详情</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-table v-if="step == 2"
             :data="listData2">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="部门名称"
                        data-index="name"></a-table-column>
        <a-table-column title="应看人数"
                        data-index="usersCount"></a-table-column>
        <a-table-column title="完成人数"
                        data-index="user_complete_count"></a-table-column>
        <a-table-column title="完成率"
                        data-index="complete_rate"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button @click="viewList(record.id, 3)"
                        type="primary"
                        size="mini">查看详情</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-table v-if="step == 3"
             :data="listData3">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="人员姓名"
                        data-index="name"></a-table-column>
        <a-table-column title="应看章节数"
                        data-index="course_section_count"></a-table-column>
        <a-table-column title="已完播章节数"
                        data-index="user_complete_count"></a-table-column>
        <a-table-column title="完成率"
                        data-index="complete_rate"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button @click="viewList(record.id, 4)"
                        type="primary"
                        size="mini">查看详情</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-table v-if="step == 4"
             :data="listData4">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="章节名称"
                        data-index="name"></a-table-column>
        <a-table-column title="是否完播">
          <template #cell="{ record }">
            <div v-if="record.is_watch==0">未完播</div>
            <div v-if="record.is_watch==1">已完播</div>
          </template>
        </a-table-column>
        <a-table-column title="观看时间"
                        data-index="watch_time"></a-table-column>
      </template>
    </a-table>

  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>